// 获取文章列表

const params = {
    pagenum: 1, // 页码值
    pagesize: 2, // 每页显示多少条数据
    cate_id: '', // 文章分类的id  默认是空
    state: ''  // 文章的状态
  }
  
  let total = 0 // 数据的总数
  
  function render() {
    axios({
      method: 'GET',
      params,
      url: 'http://api-breakingnews-web.itheima.net/my/article/list',
      // 自定义请求头
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then(({ data: res }) => {
      console.log(res);
      // 
      if (res.status === 0) {
        $('tbody').empty()
        res.data.forEach(obj => {
          let theTr = `<tr>
          <td>${obj.title}</td>
          <td>${obj.cate_name}</td>
          <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm:ss')}</td>
          <td>${obj.state}</td>
          <th>
          <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
              </th>
      </tr>`;
          $('tbody').append(theTr)
        });
  
        // 设置文章的总数
        total = res.total
  
        // 设置分页
  
        setPage()
      }
    })
  }
  
  // 分页的逻辑代码 必须等到请求成功之后,才能执行
  function setPage() {
    layui.use('laypage', function () {
      const laypage = layui.laypage;
  
      //完整功能
      laypage.render({
        elem: 'page'
        , count: total            //数据总数，从服务端得到
        , limit: params.pagesize  // 每页显示的条数
        , limits: [2, 3, 5, 10, 20] // 每页条数的选择项
        , curr: params.pagenum // 起始页 
        , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
        , jump: function (obj, first) {
          //obj包含了当前分页的所有参数，比如：
          console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
          console.log(obj.limit); //得到每页显示的条数
  
          //首次不执行
          if (!first) {
            console.log('不是首次的代码执行');
            /*
              修改params里的页码值 和 每页的数据
            */
            params.pagenum = obj.curr
            params.pagesize = obj.limit
            console.log(params);
            render() // 重新渲染
          }
        }
      });
    });
  }
  
  $('tbody').on('click', '.del', function () {
    const id = $(this).attr('myid')
    // 
    layer.confirm('确定要删除么?', { icon: 3, title: '温馨提示' }, function (index) {
  
      axios({
        method: 'GET',
        url: `http://api-breakingnews-web.itheima.net/my/article/delete/${id}`,
        // 自定义请求头
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(({ data: res }) => {
        console.log(res);
        layer.msg(res.message)
        // 判断请求成功
        if (res.status === 0) {
          render() // 重新渲染
          layer.close(index);
        }
      })
  
  
    });
  
  
  
  
  })
  
  
  // 获取文章分类列表
  function getCates() {
    axios({
      method: 'GET',
      url: 'http://api-breakingnews-web.itheima.net/my/article/cates',
      // 自定义请求头
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then(({ data: res }) => {
      console.log(res);
      // 判断请求成功
      if (res.status === 0) {
        // 默认一进来要添加一个option 默认选项 --- 请选择分类
        $('select[name="category"]').append(`<option value="" lay-verify="cate">请选择分类</option>`)
        res.data.forEach(obj => {
          const theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
          $('select[name="category"]').append(theOption)
        })
        // 等循环结束之后,再执行form.render() 手动的去刷新了一下当前的select框的数据, 因为option标签是动态插入的
        layui.form.render('select', 'category')
      }
    })
  }
  getCates()
  
  // 渲染页面
  render()
  
  $('form').on('submit', function (e) {
    e.preventDefault()
  
    /*
      1. 分别获取文章的分类和状态 
      2. 修改params参数里的cate_id 和 state
      3. 发送请求, 渲染页面
    */
    //  文章的分类
    const cate_id = $('select[name="category"]').val()
    // 文章的状态
    const state = $('select[name="state"]').val()
    console.log(cate_id, state);
  
    // 修改查询参数
    params.cate_id = cate_id
    params.state = state
  
    // 发送请求
    render()
  })